<template>
    <div class="flex align-center justify-between pl-2 pr-2 pt-[20px] pb-[20px]">
        <div class="text-text--primary font-[500] text-[20px] leading-[28px]">{{ props.title }}</div>
        <div class="min-h-[40px]">
            <tableTitleRightAddBtn v-if="props.showAdd" @add="emit('add')" class="ml-4"></tableTitleRightAddBtn>
            <tableTitleRightMoreBtn v-if="props.showMore" @add="emit('more')" class="ml-4"></tableTitleRightMoreBtn>
        </div>
    </div>
</template>

<script lang="ts" setup>
const emit = defineEmits(["add"]);
const props = defineProps({
    title: {
        type: String,
        default: ""
    },
    showAdd: {
        type: Boolean,
        default: true
    },
    showMore: {
        type: Boolean,
        default: false
    }
})
</script>

<style scoped></style>